<template>
  <div class="ScenerySpot">
    <div class="input_box_back">
      <div class="input_box">
        <!-- asaas -->
        <div class="select_box_list_item" @click="getscenert">
          <span class="ran_box_tn">分数前5景点</span>
          </div>
        <div class="select_box_list_item" @click="getSum_max10_btn">
          <span class="ran_box_tn">点评人数前10景点</span>
          </div>
        <div class="select_box_list_item" @click="getLevel_max10_btn">
          <span class="ran_box_tn">景区5A等级前10景点</span>
          </div>
        <div class="select_box_list_item" @click="getHot_max10_btn">
          <span class="ran_box_tn">景区热度前10景点</span>
          </div>
      </div>
    </div>

    <div class="rank_box">
      <!-- {{ ScenerySpot_list }} -->
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
        style="overflow:visible"
      >
        <template v-if="ScenerySpot_list.length>0">
          <li
            class="rank_list infinite-list-item"
            v-for="item in ScenerySpot_list"
            :key="item"
            v-loading="loading_status"
            :element-loading-svg="svg"
            element-loading-text="Loading..."
            element-loading-svg-view-box="-10, -10, 50, 50"
            :style="{'background-image':`url(${getImageUrl(item.src_id)}`}"
          >
            <!-- <img class="rank_box_back" src="@/assets/img/cardimg/2.png" /> -->
            <!-- GRADE -->
            <div class="tank_box_info">
              <div class="rank_info_title">
                <h3>景点名字</h3>
                {{ item.DIM_SPOT }}
              </div>
              <div class="rank_info_title">
                <h3>城市</h3>
                {{ item.CITY ? item.CITY : '武汉' }}
              </div>
              <div class="rank_info_title">
                <h3>景点介绍</h3>
                {{ item.INTRO }}
              </div>
              <div class="rank_info_title">
                <h3>景区地点</h3>
                {{ item.LOCATION }}
              </div>
              <div class="rank_info_title">
                <h3>景点公告</h3>
                {{ item.NOTICE ? item.NOTICE : '正在修改中, 稍安互躁。'}}
              </div>
              <div class="rank_info_title">
                <h3>营业时间</h3>
                {{ item.OPENTIME }}
              </div>
              <div class="rank_info_title">
                <h3>景区省份</h3>
                {{ item.PROVINCE ? item.PROVINCE :'武汉' }}
              </div>
              <div class="rank_info_title">
                <h3>评分等级</h3>
                <el-rate
                  :texts="['超级差', '差', '一般', '良', '优秀']"
                  show-text
                  disabled
                  show-score
                  text-color="#A31127"
                  score-template="{value} 分"
                  v-if="item.SPOT_GRADE_TOP5"
                  v-model="item.SPOT_GRADE_TOP5"
                  allow-half
                />
                <el-rate
                  :texts="['超级差', '差', '一般', '良', '优秀']"
                  show-text
                  disabled
                  show-score
                  score-template="{value} 分"
                  v-else-if="item.GRADE"
                  v-model="item.GRADE"
                  allow-half
                />
                <!-- <el-ratev-mod。el="item.GRADE" allow-half />      -->
                <div v-else>该评分暂未登记</div>
              </div>
              <div class="rank_info_title">
                <h3>点评总人数</h3>
                {{ item.SUM + ' 人'}}
              </div>
              <div class="rank_info_title">
                <div class="rank_btn">
                  <div class="btn2">
                    <div class="buttons" @click="set_default_city(item)">
                      <button class="btn">
                        <span></span>
                        <p data-start="good luck!" data-text="点击设置默认旅游景点" data-title="设置默认"></p>
                      </button>
                    </div>
                  </div>
                  <div class="btn3">
                    <div class="buttons">
                      <button class="btn" @click="go_info(item)">
                        <!-- <span></span> -->
                        <!-- <p data-start="good luck!" data-text="点击查看详情" data-title="查看详情"></p> -->
                        <p data-start="good luck!" data-text="点击查看景点分析" data-title="景点分析"></p>
                      </button>
                      <button class="btn" @click="go_comment(item)">
                        <!-- <span></span> -->
                        <!-- <p data-start="good luck!" data-text="点击查看详情" data-title="查看详情"></p> -->
                        <p data-start="good luck!" data-text="点击查看评论总结" data-title="评论总结"></p>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- {{ item }} -->
          </li>
          <p
            class="load_box custom-loading-svg"
            v-loading="loading"
            :element-loading-svg="svg"
            element-loading-text="Loading..."
            element-loading-svg-view-box="-10, -10, 50, 50"
            v-if="loading && status_data!=='max5'"
          >
            <!-- Loading... -->
          </p>
          <!-- <p class="load_box" v-if="noMore">No more</p> -->
        </template>
        <template v-else>
          <el-empty description="无响应值" />
        </template>
        <!-- <template v-if="ScenerySpot_list">
          <el-empty description="无响应值" />
        </template>-->
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import useImageUrl from "@/Hook/useImageUrl";
import { storeToRefs } from "pinia";
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
let { city_id, menu,city_select_list ,search_data,search_status,city_select_tag} = storeToRefs(menulist);
import { Eleme, Search } from "@element-plus/icons-vue";
import {
  getSum_max5,
  getSum_max10,
  getLevel_max10,
  getHot_max10,
  AreaSearch,
  SpotSearch,
  getCity,
  CommentSearch
} from "@/request/cityserves";
let router = useRouter();
let pages = ref(1);
let status_data = "max5";
let serach_info = ref("");
let select_data = ref("景区查询");
let ScenerySpot_list: Array<any> = ref([]);
let new_list: Array<any> = ref([]);
let loading_status = ref(false);
const count = ref(10);
const loading = ref(false);
const noMore = computed(() => count.value >= 20);
const disabled = computed(() => loading.value || noMore.value);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`;
import type { DropdownInstance } from 'element-plus'

const dropdown1 = ref<DropdownInstance>()
const options_value = ref("");
const options = ref([]);

const select_byn = item => {
  select_data.value = item;
};

const load = async () => {
  if (status_data !== "max5" && serach_info.value) {
    pages.value += 1;
    loading.value = true;
    console.log(serach_info.value);
    if (select_data.value == "景区查询") {
      await SpotSearch({
        page: pages.value,
        search: serach_info.value
      }).then((res) => {
        let {data,status} = res;
        if (status==201) {
          ElMessage({
            message: "评论已到底",
            type: "warning"
          });
        }else{
          data.forEach(item => {
            item.src_id = Math.floor(Math.random() * 8) + 1;
            ScenerySpot_list.value.push(item);
          });
        }
        // console.log(ScenerySpot_list.value);
        loading.value = false;
      });
    } else
      // await AreaSearch({
      //   page: pages.value,
      //   search: serach_info.value
      // }).then((res) => {
      //   let {data,status} = res;
      //   if (status==201) {
      //     ElMessage({
      //       message: "评论已到底",
      //       type: "warning"
      //     });
      //   }else{
      //     data.forEach(item => {
      //       item.src_id = Math.floor(Math.random() * 8) + 1;
      //     });
      //     ScenerySpot_list.value = data;
      //   }
      //   loading_status.value = false;
      // });
   {
    // }else{
      await CommentSearch({
        page: pages.value,
        search: serach_info.value
      }).then(({ data }) => {
        // console.log(data);
        
        data.forEach(item => {
          item.src_id = Math.floor(Math.random() * 8) + 1;
          ScenerySpot_list.value.push(item);
        });
        console.log(data);
        
        // console.log("pages", pages.value);
        loading.value = false;
      });

    }
    // console.log(ScenerySpot_list.value);
  }
  // setTimeout(() => {

  // }, 2000);
};

const showClick=()=> {
  console.log("sho");
  
  if (!dropdown1.value) return
  dropdown1.value.handleOpen()
}

const go_info = (item: any) => {
  // console.log(item);
  // console.log(item.DIM_SPOT_ID);
  // console.log("景点分析");

  menulist.city_id = item;
  router.push({path:'/SceneryPoint',query:{
    id:item.SPOT_ID?item.SPOT_ID:item.DIM_SPOT_ID
  }})

  // console.log(city_id.value);
};
const go_comment = (item: any) => {
  console.log(item);
  console.log("查看评论");

  menulist.city_id = item;
  router.push({path:'/ReView',query:{
    id:item.SPOT_ID?item.SPOT_ID:item.DIM_SPOT_ID
  }})

  // console.log(city_id.value);
};
const set_default_city = (item: any) => {
  console.log("设置默认");
  menulist.default_city = item;
};

const serarch_btn = async () => {
  // if (!dropdown1.value) return
  ScenerySpot_list.value=[]
  // dropdown1.value.handleOpen()
  if (serach_info.value) {
    loading_status.value = true;
    status_data = "new_mex";
    if (select_data.value == "景区查询") {
      await SpotSearch({
        page: pages.value,
        search: serach_info.value
      }).then((res) => {
        console.log(res);
        
        let {data,status} = res;
        if (status==201) {
          ElMessage({
            message: "数据已到底",
            type: "warning"
          });
        }else{
          data.forEach(item => {
            item.src_id = Math.floor(Math.random() * 8) + 1;
          });
          ScenerySpot_list.value = data;
        }
        loading_status.value = false;
      });
    }else{
      await CommentSearch({
        page: pages.value,
        search: serach_info.value
      }).then((res) => {
        console.log(res);
        
        let {data,status} = res;
        if (status==201) {
          ElMessage({
            message: "数据已到底",
            type: "warning"
          });
        }else{
          data.forEach(item => {
            item.src_id = Math.floor(Math.random() * 8) + 1;
          });
          ScenerySpot_list.value = data;
        }
        loading_status.value = false;
      });

    }
  }
  // setTimeout(() => {}, 2000);
};
watch([() => serach_info.value], () => {
  if (serach_info.value == "") {
    getscenert();
  }
});
watch([() => select_data.value], () => {
  pages.value = 1;
});
watch([() => options_value.value], () => {
  pages.value = 1;
  select_data.value = options_value.value
  serach_info.value = options_value.value
});
const getscenert = async () => {
  status_data = "max5";
  var { data } = await getSum_max5();
  data.forEach(item => {
    item.src_id = Math.floor(Math.random() * 8) + 1;
  });
  ScenerySpot_list.value = data;
};
const getSum_max10_btn = async () => {
  status_data = "max5";
  var { data } = await getSum_max10();
  data.forEach(item => {
    item.src_id = Math.floor(Math.random() * 8) + 1;
  });
  ScenerySpot_list.value = data;
};
const getLevel_max10_btn = async () => {
  status_data = "max5";
  var { data } = await getLevel_max10();
  data.forEach(item => {
    item.src_id = Math.floor(Math.random() * 8) + 1;
  });
  ScenerySpot_list.value = data;
};
const getHot_max10_btn = async () => {
  status_data = "max5";
  var { data } = await getHot_max10();
  data.forEach(item => {
    item.src_id = Math.floor(Math.random() * 8) + 1;
  });
  ScenerySpot_list.value = data;
};
menulist.$subscribe((arg, state) => {  //需要写在数据变化前面
    // console.log('subscribe=========================', state.search_data)
    // getdata()
    if(state.search_data){
      // console.log( state.search_data);
      if(state.search_status==true && state.city_select_tag==false){
        select_data.value = "景区查询"
        serach_info.value = state.search_data
        serarch_btn()
      }else if(state.search_status==true && state.city_select_tag==true){
        select_data.value = "城市查询"
        serach_info.value = state.search_data
        serarch_btn()
      }
      // menulist.city_select_tag = false
      menulist.search_status = false
    }else{
      serach_info.value = state.search_data
      menulist.city_select_tag = false
      menulist.search_status = false
    }
})
// const getCity_list =async ()=>{
//   if (!city_select_list.value) {
//     let {data} = await getCity();
//     menulist.city_select_list=data
//     // options.value=data
//   }else{
//     options.value=city_select_list.value
//   }
// }
const getImageUrl = (item: any) => {
  return useImageUrl("cardimg", item, "png");
};
onMounted(() => {
  getscenert();
  // getCity_list()
});
</script>

<style lang="scss" scoped>
.ScenerySpot {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 57px);
  .rank_box {
    // background-color: aqua;
    padding-top: 80px;
    .rank_box_back {
      width: 100%;
      z-index: 1;
    }
  }
}
.input_box_back {
  width: 100%;
  background-color: rgba(78, 75, 75, 0.575);
  height: 70px;
  position: fixed;
  z-index: 99;
}

.input_box {
  margin: 0 auto;
  width: 60%;
  display: flex;
  flex-direction: row;
  // background-color: aqua;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // background-color: aquamarine;
  // margin-top: 10px;
  z-index: 99;
  .select_box_list_item {
    cursor: pointer;
    width: 20%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(78, 75, 75, 0.575);
    border: #44d8a4 solid 1px;
    transition: 1s;
    text-align: center;
    justify-content: center;
    .ran_box_tn{
      color: #ffffff;
      font-size: 17px;
      font-weight: 900;
      display: flex;
      text-align: center;
      justify-content: center;
      margin-top: 20px;
    }
  }
  .select_box_list_item:hover {
    cursor: pointer;
    width: 25%;
    height: 100%;
    border-radius: 20px;
    background-color: rgba(78, 75, 75, 0.975);
    border: #44d8a4 solid 1px;
  }
}

.btn_select {
  // background-color: rebeccapurple;
  display: flex;
  flex-direction: row;
  .select_box {
    cursor: pointer;
    height: 100%;
    width: 25px;
    // border-radius: 20px 20px 20px;
    // background-color: aquamarine;
    .el-icon svg {
      margin-top: 40px;
    }
  }
}
.sce_btn {
  height: 51px;
  font-size: 15px;
  margin-left: 10px;
  // border: 1px solid rgb(10, 223, 223);
  color: rgb(255, 0, 0);
  // border-right: 1px solid rgb(6, 226, 226);
}
.rank_list {
  list-style: none;

  // background-image: url("@/assets/img/cardimg/5.png") ;
  // background-image: linear-gradient(45deg, #fd5d66, #ffb55f), linear-gradient(135deg, #ade498, #0470dc);
  background-size: 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment: fixed;  /*关键*/
  // background-position: center;
  cursor: pointer;
  width: 70%;
  // background-color: cadetblue;
  height: 320px;
  margin: auto;
  padding: 10px;
  //   background-color: aqua;
  margin-bottom: 30px !important;

  border-radius: 5px;
  transition: 1s;
  overflow: hidden;
  .tank_box_info {
    // z-index: 990;
    height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    .rank_info_title {
      background-color: rgba(0, 0, 0, 0.2);
      font-size: 15px;
      width: 45%;
      // gap: 1px;
      // margin-left: 10px;
      margin-top: 2px;
      padding: 2px;
      height: 60px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: white;
      .rank_btn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .btn2 {
          .buttons {
            // display: flex;
            // justify-content: space-around;
            // top: 20px;
            // left: 20px;
          }

          .buttons button {
            width: 100px;
            height: 50px;
            background-color: white;
            // margin: 20px;
            color: #568fa6;
            position: relative;
            overflow: hidden;
            font-size: 14px;
            letter-spacing: 1px;
            font-weight: 500;
            text-transform: uppercase;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
          }

          .buttons button:before,
          .buttons button:after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            background-color: #44d8a4;
            transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button:before {
            right: 0;
            top: 0;
            transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button:after {
            left: 0;
            bottom: 0;
          }

          .buttons button span {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            z-index: 1;
          }

          .buttons button span:before,
          .buttons button span:after {
            content: "";
            position: absolute;
            width: 2px;
            height: 0;
            background-color: #44d8a4;
            transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button span:before {
            right: 0;
            top: 0;
            transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button span:after {
            left: 0;
            bottom: 0;
          }

          .buttons button p {
            padding: 0;
            margin: 0;
            transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
            position: absolute;
            width: 100%;
            height: 100%;
          }

          .buttons button p:before,
          .buttons button p:after {
            position: absolute;
            width: 100%;
            transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
            z-index: 1;
            left: 0;
          }

          .buttons button p:before {
            content: attr(data-title);
            top: 50%;
            transform: translateY(-50%);
          }

          .buttons button p:after {
            content: attr(data-text);
            top: 150%;
            color: #44d8a4;
          }

          .buttons button:hover:before,
          .buttons button:hover:after {
            width: 100%;
          }

          .buttons button:hover span {
            z-index: 1;
          }

          .buttons button:hover span:before,
          .buttons button:hover span:after {
            height: 100%;
          }

          .buttons button:hover p:before {
            top: -50%;
            transform: rotate(5deg);
          }

          .buttons button:hover p:after {
            top: 50%;
            transform: translateY(-50%);
          }

          .buttons button.start {
            background-color: #44d8a4;
            box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
          }

          .buttons button.start p:before {
            top: -50%;
            transform: rotate(5deg);
          }

          .buttons button.start p:after {
            color: white;
            transition: all 0s ease;
            content: attr(data-start);
            top: 50%;
            transform: translateY(-50%);
            animation: start 0.3s ease;
            animation-fill-mode: forwards;
          }

          @keyframes start {
            from {
              top: -50%;
            }
          }

          .buttons button.start:hover:before,
          .buttons button.start:hover:after {
            display: none;
          }

          .buttons button.start:hover span {
            display: none;
          }

          .buttons button:active {
            outline: none;
            border: none;
          }

          .buttons button:focus {
            outline: 0;
          }
        }
        .btn3 {
          .buttons {
            width: 200px;
            display: flex;
            // padding: 1px;
            justify-content: space-between;
            // background-color: #44d8a4;
            // top: 20px;
            // left: 20px;
          }

          .buttons button {
            width: 99px;
            height: 50px;
            background-color: white;
            // margin: 20px;
            color: #568fa6;
            position: relative;
            overflow: hidden;
            font-size: 14px;
            letter-spacing: 1px;
            font-weight: 500;
            text-transform: uppercase;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            // margin-left: 10px;
          }

          .buttons button:before,
          .buttons button:after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            background-color: #44d8a4;
            transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button:before {
            right: 0;
            top: 0;
            transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button:after {
            left: 0;
            bottom: 0;
          }

          .buttons button span {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            z-index: 1;
          }

          .buttons button span:before,
          .buttons button span:after {
            content: "";
            position: absolute;
            width: 2px;
            height: 0;
            background-color: #44d8a4;
            transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button span:before {
            right: 0;
            top: 0;
            transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
          }

          .buttons button span:after {
            left: 0;
            bottom: 0;
          }

          .buttons button p {
            padding: 0;
            margin: 0;
            transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
            position: absolute;
            width: 100%;
            height: 100%;
          }

          .buttons button p:before,
          .buttons button p:after {
            position: absolute;
            width: 100%;
            transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
            z-index: 1;
            left: 0;
          }

          .buttons button p:before {
            content: attr(data-title);
            top: 50%;
            transform: translateY(-50%);
          }

          .buttons button p:after {
            content: attr(data-text);
            top: 150%;
            color: #44d8a4;
          }

          .buttons button:hover:before,
          .buttons button:hover:after {
            width: 100%;
          }

          .buttons button:hover span {
            z-index: 1;
          }

          .buttons button:hover span:before,
          .buttons button:hover span:after {
            height: 100%;
          }

          .buttons button:hover p:before {
            top: -50%;
            transform: rotate(5deg);
          }

          .buttons button:hover p:after {
            top: 50%;
            transform: translateY(-50%);
          }

          .buttons button.start {
            background-color: #44d8a4;
            box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
          }

          .buttons button.start p:before {
            top: -50%;
            transform: rotate(5deg);
          }

          .buttons button.start p:after {
            color: white;
            transition: all 0s ease;
            content: attr(data-start);
            top: 50%;
            transform: translateY(-50%);
            animation: start 0.3s ease;
            animation-fill-mode: forwards;
          }

          @keyframes start {
            from {
              top: -50%;
            }
          }

          .buttons button.start:hover:before,
          .buttons button.start:hover:after {
            display: none;
          }

          .buttons button.start:hover span {
            display: none;
          }

          .buttons button:active {
            outline: none;
            border: none;
          }

          .buttons button:focus {
            outline: 0;
          }
        }
      }
    }
  }
}
.rank_list:hover {
  border-radius: 25px;
  // background: #e0e0e0;
  box-shadow: -28px 28px 57px #bebebe, 28px -28px 57px #ffffff;
}
.load_box {
  width: 60%;
  margin: 0 auto;
  height: 100px;
  background-color: antiquewhite;
}
@media (max-width: 900px) {
  .rank_list {
    width: 90%;
    background-color: cadetblue;
    margin-top: 10px;
    height: 320px;
    margin: 0 auto;
    //   background-color: aqua;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .load_box {
    width: 90%;
    margin: 0 auto;
    height: 100px;
    background-color: antiquewhite;
  }
}

.example-showcase .el-loading-mask {
  z-index: 9;
}
:deep(.el-button-group) {
  display: flex;
  padding: 0;
}
:deep(.el-button) {
  height: 100%;
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>